<template>
	<view class="flex flex-column" :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view :class="model+'-wrap2'">
				<view class="status_bar">

				</view>
				<view class="nav_bar flex align-center">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="topTitle A-Heavy ml-3" :class="model=='light'?'topTitleLight':''">
					{{i18n.l037}}
				</view>
				<view class="nameList ml-3 flex align-center A-Medium" :class="model=='light'?'nameListLight':''">
					<view @click="changePriceType(index)" class="mr-4 flex align-center justify-center"
						:class="index==priceType?'item1':'item'" v-for="(item,index) in nameList">
						<view v-if="index==0" class="f0" style="margin-right: 6rpx;">
							<image v-if="priceType==0" style="width: 28rpx;height: 28rpx;" src="/static/images/t2.png"
								mode=""></image>
							<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/t1.png" mode="">
							</image>
						</view>
						<view v-if="index==1" class="f0" style="margin-right: 6rpx;">
							<image v-if="priceType==1" style="width: 28rpx;height: 28rpx;"
								src="/static/images/index/9.png" mode=""></image>
							<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/index/8.png" mode="">
							</image>
						</view>
						<view v-if="index==2" class="f0" style="margin-right: 6rpx;">
							<image v-if="priceType==2" style="width: 28rpx;height: 28rpx;"
								src="/static/images/index/11.png" mode=""></image>
							<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/index/10.png" mode="">
							</image>
						</view>{{item}}
					</view>
				</view>
			</view>
			<view class="title1 text-alignC A-Medium" :class="model=='light'?'title1Light':''">
				{{i18n.l038}}
			</view>
			<view class="D-Bold text-alignC num1" :class="model=='light'?'num1Light':''">
				{{
					nameList[priceType]=='USDT'?USDTMoney.z:
					nameList[priceType]=='BTC'?BTCMoney.z:
					nameList[priceType]=='ETH'?ETHMoney.z:''
				}}
			</view>
			<view class="flex align-center justify-center" style="margin-top: 8rpx;margin-bottom: 32rpx;">
				<view class="title1" style="margin-top: 0;margin-bottom: 0;">
					{{i18n.l039}}
				</view>
				<view :class="sumAssetData<0?'text1':'text2'">
					<!-- ${{
						nameList[priceType]=='USDT'?USDTMoney.s:
						nameList[priceType]=='BTC'?BTCMoney.s:
						nameList[priceType]=='ETH'?ETHMoney.s:''
					}} {{
						nameList[priceType]=='USDT'?USDTMoney.b:
						nameList[priceType]=='BTC'?BTCMoney.b:
						nameList[priceType]=='ETH'?ETHMoney.b:''
					}}% -->
					{{sumAssetData < 0 ? "-" : "+"}}{{Math.abs(sumAssetData)}}  
					<!-- {{
						sumAssetRate
					}}% -->
				</view>
			</view>
			<view class="flex A-Medium align-center justify-between mx-3">
				<view class="block flex align-center flex-column" :class="model=='light'?'blockLight':''">
					<view class="title1" style="margin-top: 0;margin-bottom: 4rpx;">
						{{i18n.l040}}
					</view>
					<view :class="profitAmount7d < 0 ? 'text1' : 'text2'">
						{{getFormattedAmount(profitAmount7d)}}
					</view>
					<!-- <view class="mt-1">
						<view :class="profitRate7d<0?'text1':'text2'">
							{{profitRate7d}}%
						</view>
					</view> -->
				</view>
				<view class="block flex align-center flex-column" :class="model=='light'?'blockLight':''">
					<view class="title1" style="margin-top: 0;margin-bottom: 4rpx;">
						{{i18n.l041}}
					</view>
					<view :class="profitAmount30d < 0 ? 'text1' : 'text2'">
						{{getFormattedAmount(profitAmount30d)}}
					</view>
					<!-- <view class="mt-1">
						<view :class="profitRate30d<0?'text1':'text2'">
							{{profitRate30d}}%
						</view>
					</view> -->
				</view>
				<view class="block flex align-center flex-column" :class="model=='light'?'blockLight':''">
					<view class="title1" style="margin-top: 0;margin-bottom: 4rpx;">
						{{i18n.l042}}
					</view>
					<view :class="profitAmount999 < 0 ? 'text1' : 'text2'">
						{{getFormattedAmount(profitAmount999)}}
					</view>
					<!-- <view class="mt-1">
						<view :class="profitRate999<0?'text1':'text2'">
							{{profitRate999}}%
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="flex-1 A-Medium mouthWrap mt-3 p-4 pt-3" :class="model=='light'?'mouthWrapLight':''">
			<view class="mx-2 flex align-center">
				<view class="f0">
					<image @click="changeMouth(0)" style="width: 28rpx;height: 28rpx;" src="/static/images/zichanfenxi/1.png" mode=""></image>
				</view>
				<view class="flex-1 text-alignC mouthTitle">
					{{mouth}}{{i18n11.n018}},{{year}}
				</view>
				<view class="f0">
					<image @click="changeMouth(1)" style="width: 28rpx;height: 28rpx;" src="/static/images/zichanfenxi/2.png" mode=""></image>
				</view>
			</view>
			<view class="weekTitle flex align-center">
				<view v-for="(item,index) in weekList" class="flex-1 text-alignC flex-shrink0">
					{{item}}
				</view>
			</view>
			<view class="flex align-center" v-for="(item,index) in list">
				<view v-for="(items,indexs) in item" class="flex-1 flex-shrink0 flex flex-column align-center">
					<view class="dayText" :style="items.mouth!=mouth?'color: #7F838D;':''">
						{{items.day}}
					</view>
					<view :class="items.num<0?'text22':'text11'" style="min-height: 56rpx;" :style="items.mouth!=mouth?'color: #7F838D;':''">
						{{items.num<0?'':'+'}}{{items.num}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		assetDayProfitLoss,
		// historyProfitLossRate,
		profitLossRate
	} from '@/core/api/user.js';
	import {
		assetAmountSelect
	} from '@/core/api/index.js';
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				nameList: ['USDT','BTC','ETH'],
				priceType: 0,
				listIndex: 7,
				listIndex2: 7,
				formattedDate: '',
				mrsyObj: {},
				ljsyObj: {},
				sumAssetData:'',
				sumAssetRate:'',
				"profitRate7d": 0,
				"profitRate30d": 0,
				"profitRate999": 0,
				"profitAmount7d": 0,
				"profitAmount30d": 0,
				"profitAmount999": 0,
				// 日历-start
				mouth: '',
				year: '',
				weekList: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fir', 'Sat'],
				list: [],
				// 日历-end
			}
		},
		computed: {
			i18n() {
				return this.$t('last')
			},
			i18n11() {
				return this.$t('newObj3');
			},
			model() {
				// return 'dark'
				return this.$store.state.config.model
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney
			},
			BTCMoney() {
				return this.$store.state.config.BTCMoney
			},
			ETHMoney() {
				return this.$store.state.config.ETHMoney
			},
		},
		onLoad() {
			// this.getHistoryProfitLossRate();
			// 创建一个新的Date对象，表示当前日期和时间
			const currentDate = new Date();
			// 获取当前年份
			this.year = currentDate.getFullYear();
			// 获取当前月份（注意月份是从0开始计数的，所以需要加1）
			this.mouth = currentDate.getMonth() + 1;
			this.initList(this.year, this.mouth);
			this.getData();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			// 用户余额
			this.$store.dispatch('config/getAassetList');
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		methods: {
			changeMouth(type){
				if(type==1){
					if(this.mouth+1>12){
						this.mouth=1;
						this.year++;
					}else{
						this.mouth++;
					}
				}else{
					if(this.mouth-1<1){
						this.mouth=12;
						this.year--;
					}else{
						this.mouth--;
					}
				}
				this.initList(this.year, this.mouth);
				this.getData();
			},
			getData() {
				this.$tool.showLoading();
				assetAmountSelect({
					coinType: this.nameList[this.priceType],
					mobileUserId: uni.getStorageSync('mobileUserId'),
					startDate:this.list[0][0].year+'-'+this.list[0][0].mouth+'-'+this.list[0][0].day,
					endDate:this.list[this.list.length-1][this.list[this.list.length-1].length-1].year+'-'+this.list[this.list.length-1][this.list[this.list.length-1].length-1].mouth+'-'+this.list[this.list.length-1][this.list[this.list.length-1].length-1].day,
				}).then(res => {
					console.log(res.result, 'cs--cs');
					let obj = res.result;
					this.profitRate7d = Number(obj.day1AssetRate);
					this.profitRate30d = Number(obj.day7AssetRate);
					this.profitRate999 = Number(obj.day30AssetRate);
					this.profitAmount7d = Number(obj.day1AssetData);
					this.profitAmount30d = Number(obj.day7AssetData);
					this.profitAmount999 = Number(obj.day30AssetData);
					this.sumAssetData = Number(obj.sumAssetData);
					this.sumAssetRate = Number(obj.sumAssetRate);
					let list = obj.amountListVOList.reverse();
					let listIndex = 0;
					let listItemIndex = 0;
					for(let i=0;i<list.length;i++){
						this.list[listIndex][listItemIndex].num = list[i].amount;
						this.list[listIndex][listItemIndex].index = i;
						this.list[listIndex][listItemIndex].assetDate = list[i].assetDate;
						listItemIndex++;
						
						if((i + 1) % 7 == 0){
							listIndex++;
							listItemIndex = 0;
						}
						
					}
					uni.hideLoading();
					this.$forceUpdate();
				})
			},
			initList(year, mouth) {
				// mouth = 8;
				let list = [];
				let listIndex = 0;
				let dayNum = this.getDaysInMonth(year, mouth);
				let firstDayWeekNum = this.getWeekNum(year, mouth, 1);
				console.log(firstDayWeekNum)
				let lastDayWeekNum = this.getWeekNum(year, mouth, dayNum);
				let temList = [];
				// 补全日期1
				for (let i = 0; i < firstDayWeekNum; i++) {
					let temYear = mouth - 1 < 1 ? year - 1 : year;
					let temMouth = mouth - 1 < 1 ? 12 : mouth - 1;
					let day = this.getDaysInMonth(temYear, temMouth) - (firstDayWeekNum - i) + 1;
					temList.push({
						year: temYear,
						mouth: temMouth,
						day,
						num: 0,
					})
				}
				for (let i = 0; i < dayNum; i++) {
					if (temList.length == 7) {
						list.push(temList);
						temList = [];
					} else if(i == dayNum - 1){
						list.push(temList);
					}
					temList.push({
						year,
						mouth,
						day: i + 1,
						num: 0,
					})
				}
				// 补全日期2
				for (let i = 0; i < (6 - lastDayWeekNum); i++) {
					let temYear = mouth + 1 > 12 ? year + 1 : year;
					let temMouth = mouth + 1 > 12 ? 1 : mouth + 1;
					temList.push({
						year: temYear,
						mouth: temMouth,
						day: i + 1,
						num: 0,
					})
				}
				this.list = list;
			},
			getWeekNum(year, month, day) {
				let date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
				return date.getDay();
			},
			getDaysInMonth(year, month) {
				return new Date(year, month, 0).getDate();
			},
			// getHistoryProfitLossRate(){
			// 	historyProfitLossRate({
			// 		coinType: this.nameList[this.priceType],
			// 		mobileUserId: uni.getStorageSync('mobileUserId'),
			// 	}).then(res=>{
			// 		let obj = res.result;
			// 		this.profitRate7d = obj.profitRate7d;
			// 		this.profitRate30d = obj.profitRate30d;
			// 		this.profitRate999 = obj.profitRate999;
			// 		this.profitAmount7d = obj.profitAmount7d;
			// 		this.profitAmount30d = obj.profitAmount30d;
			// 		this.profitAmount999 = obj.profitAmount999;
			// 	})
			// },
			changePriceType(e) {
				if (this.priceType == e) {
					return;
				}
				this.priceType = e;
				this.getData();
				// this.getHistoryProfitLossRate();
			},
			getFormattedAmount(amount) {
				if(!amount){
					return "0.00"
				}else{
					return `${amount >= 0 ? '+' : '-'}${Math.abs(amount)}`
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.flex-shrink0 {
		flex-shrink: 0;
	}

	// 日历-start
	.mouthWrap {
		border-radius: 40rpx 40rpx 0 0;
		background: #0E0F11;

		.mouthTitle {
			font-size: 32rpx;
			color: #fff;
		}

		.weekTitle {
			font-size: 24rpx;
			color: #7F838D;
			padding-top: 44rpx;
			padding-bottom: 26rpx;
		}

		.dayText {
			font-size: 28rpx;
			color: #fff;
		}

		.text11 {
			margin-top: 6rpx;
			font-size: 18rpx;
			color: #D22540;
		}

		.text22 {
			margin-top: 6rpx;
			font-size: 18rpx;
			color: #53D290;
		}

		.text33 {
			font-size: 24rpx;
			color: #7F838D;
		}
	}

	.mouthWrapLight {
		background: #fff;

		.mouthTitle {
			color: #0E0F11;
		}

		.dayText {
			color: #0E0F11;
		}
	}

	// 日历-end
	.TypeLine {
		width: 750rpx;
		height: 502rpx;
		// padding: 40rpx;
		background-color: #161823;
		position: relative;

		.top {
			position: absolute;
			top: 30rpx;
			left: 0;
			right: 0;
			width: 680rpx;
			margin: auto;

			.title {
				font-size: 24rpx;
				color: #8F919D;
			}

			.fbt2 {
				font-size: 28rpx;

				.color1 {
					color: #f7f7f7;
				}

				.color2 {
					color: #D22540;
				}
			}

			.fbt {
				display: flex;
				justify-content: space-between;
				color: #8F919D;
				font-size: 26rpx;
				margin-top: 40rpx;

				.bfb {
					color: #029F70;
				}

				.btc {
					position: relative;
				}

				.btc::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background: #FE7301;
					border-radius: 50%;
					position: absolute;
					left: -20rpx;
					top: 16rpx;
				}

				.sy {
					position: relative;
				}

				.sy::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background: #006EFF;
					border-radius: 50%;
					position: absolute;
					left: -20rpx;
					top: 16rpx;
				}
			}
		}

		.bottom {
			width: 720rpx;
			margin: 0 auto;
			margin-top: -60rpx;

			.chart-container {
				width: 100%;
				height: 400rpx;
			}
		}

	}

	.TypeLineLight {
		width: 750rpx;
		height: 502rpx;
		// padding: 40rpx;
		background-color: #fff;
		position: relative;

		.top {
			position: absolute;
			top: 30rpx;
			left: 0;
			right: 0;
			width: 680rpx;
			margin: auto;

			.title {
				font-size: 24rpx;
				color: #8F919D;
			}

			.fbt2 {
				font-size: 28rpx;

				.color1 {
					color: #7F838D;
				}

				.color2 {
					color: #D22540;
				}
			}

			.fbt {
				display: flex;
				justify-content: space-between;
				color: #8F919D;
				font-size: 26rpx;
				margin-top: 40rpx;

				.bfb {
					color: #029F70;
				}

				.btc {
					position: relative;
				}

				.btc::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background: #FE7301;
					border-radius: 50%;
					position: absolute;
					left: -20rpx;
					top: 16rpx;
				}

				.sy {
					position: relative;
				}

				.sy::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background: #006EFF;
					border-radius: 50%;
					position: absolute;
					left: -20rpx;
					top: 16rpx;
				}
			}
		}

		.bottom {
			width: 720rpx;
			margin: 0 auto;
			margin-top: -60rpx;

			.chart-container {
				width: 100%;
				height: 400rpx;
			}
		}

	}

	.title2 {
		font-size: 32rpx;
		color: #F7F7F7;
	}

	.title2Light {
		font-size: 32rpx;
		color: #0E0F11;
	}

	.block {
		width: 210rpx;
		min-height: 110rpx;
		background: #16181C;
		border-radius: 16rpx;
		padding: 20rpx 0;

		.num {
			font-size: 28rpx;
			color: #F7F7F7;
		}

		.label1 {
			background: rgba(83, 210, 144, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 6rpx 10rpx;
		}

		.label2 {
			background: rgba(210, 37, 64, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 6rpx 10rpx;
		}
	}

	.blockLight {
		width: 210rpx;
		min-height: 110rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx 0;

		.num {
			font-size: 28rpx;
			color: #0E0F11;
		}

		.label1 {
			background: rgba(83, 210, 144, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 6rpx 10rpx;
		}

		.label2 {
			background: rgba(210, 37, 64, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 6rpx 10rpx;
		}
	}

	.text1 {
		font-size: 20rpx;
		color: #53D290;
	}

	.text2 {
		font-size: 20rpx;
		color: #D22540;
	}

	.num1 {
		font-weight: bold;
		font-size: 60rpx;
		color: #F7F7F7;
	}

	.num1Light {
		color: #0E0F11;
	}

	.title1 {
		font-size: 24rpx;
		color: #7F838D;
		margin-top: 56rpx;
		margin-bottom: 16rpx;
	}

	.title1Light {
		font-size: 24rpx;
		color: #7F838D;
	}

	.topTitle {
		font-size: 40rpx;
		color: #F7F7F7;
		margin-top: 48rpx;
		margin-bottom: 36rpx;
	}

	.topTitleLight {
		font-size: 40rpx;
		color: #0E0F11;
	}

	.nameList {
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameList2 {
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #5951BA;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameList2Light {
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #FFF;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
			border: none;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #5951BA;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
			border: none;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}
</style>